{% extends 'base.html' %}

{% load staticfiles %}

{% block title %}天天生鲜-提交订单{% endblock %}

{% block search_bar %}
	<div class="search_bar clearfix">
		<a href="{% url 'goods:index' %}" class="logo fl"><img src="{% static 'images/logo.png' %}"></a>
		<div class="sub_page_name fl">|&nbsp;&nbsp;&nbsp;&nbsp;提交订单</div>
		<div class="search_con fr">
			<form action="/search/" method="get">
            <input type="text" class="input_text fl" name="q" placeholder="搜索商品">
            <input type="submit" class="input_btn fr" value="搜索">
            </form>
		</div>		
	</div>
{% endblock %}

{% block body %}
	<h3 class="common_title">确认收货地址</h3>

	<div class="common_list_con clearfix">
		<dl>
			<dt>寄送到：</dt>
			{% if address %}
			<dd><input type="radio" name="address_id" value="{{address.id}}" checked="">{{address.receiver_name}} {{address.detail_addr}} {{address.receiver_mobile}}</dd>
			{% else %}
			<dd><input type="radio" name="address_id" value="" checked="">请添加地址</dd>
			{% endif %}
		</dl>
		<a href="{% url 'users:address' %}" class="edit_site">编辑收货地址</a>

	</div>
	
	<h3 class="common_title">支付方式</h3>	
	<div class="common_list_con clearfix">
		<div class="pay_style_con clearfix">
			<input type="radio" name="pay_style" value="1" checked>
			<label class="cash">货到付款</label>
			<input type="radio" name="pay_style" value="2">
			<label class="weixin">微信支付</label>
			<input type="radio" name="pay_style" value="2">
			<label class="zhifubao"></label>
			<input type="radio" name="pay_style" value="2">
			<label class="bank">银行卡支付</label>
		</div>
	</div>

	<h3 class="common_title">商品列表</h3>
	
	<div class="common_list_con clearfix">
		<ul class="goods_list_th clearfix">
			<li class="col01">商品名称</li>
			<li class="col02">商品单位</li>
			<li class="col03">商品价格</li>
			<li class="col04">数量</li>
			<li class="col05">小计</li>		
		</ul>
		{% for sku in skus %}
		<ul class="goods_list_td clearfix">
			<li class="col01">{{forloop.counter}}</li>			
			<li class="col02"><img src="{{ sku.default_image.url }}"></li>
			<li class="col03">{{sku.name}}</li>
			<li class="col04">{{sku.unit}}</li>
			<li class="col05">{{sku.price}}元</li>
			<li class="col06">{{sku.count}}</li>
			<li class="col07">{{sku.amount}}元</li>
		</ul>
		{% endfor %}
	</div>

	<h3 class="common_title">总金额结算</h3>

	<div class="common_list_con clearfix">
		<div class="settle_con">
			<div class="total_goods_count">共<em>{{total_count}}</em>件商品，总金额<b>{{total_skus_amount}}元</b></div>
			<div class="transit">运费：<b>{{trans_cost}}元</b></div>
			<div class="total_pay">实付款：<b>{{total_amount}}元</b></div>
		</div>
	</div>

	<div class="order_submit clearfix">
		<a href="javascript:;" id="order_btn">提交订单</a>
	</div>	
{% endblock %}

{% block footer %}
	<div class="popup_con">
		<div class="popup">
			<p>订单提交成功！</p>
		</div>
		
		<div class="mask"></div>
	</div>
{% endblock %}

{% block bottom_files %}
	<script type="text/javascript" src="{% static 'js/jquery-1.12.2.js' %}"></script>
	<script type="text/javascript">
		$('#order_btn').click(function() {
		    // 地址id
			var address_id = $('input[name="address_id"]').val();
			if (address_id == "") {
				alert("请先编辑收货地址!");
			}
			else {
				var order_data = {
					address_id: address_id,
                    pay_method: $('input[name="pay_style"]:checked').val(),
					sku_ids: "{{ sku_ids }}",
                    csrfmiddlewaretoken: "{{ csrf_token }}"
				};
				$.post('/orders/commit', order_data, function(data){
					if (1 == data.code) {
					    // 用户登录
                        location.href = '/users/login';
                    } else if (6 == data.code) {
						alert("库存不足，请修改订单！");
					} else if (0 == data.code) {
					    // 下单成功
						$('.popup_con').fadeIn('fast', function() {
							setTimeout(function(){
								$('.popup_con').fadeOut('fast',function(){
									location.href = '/orders/1';
								});	
							},3000)	
						});
					} else {
					    alert("下单失败，请重试！");
                    }
				});
			}
		});
	</script>
{% endblock %}